<template>
    <div class="storageDetail">
        <div class="img-wrap">
            <img src="../assets/image/201.png" alt="">
        </div>
        <div class="Notice-title">
          <div class="titles">
              <i>首页></i>
              <i>资产存储></i>
              <i class="sss">储存详情</i>
          </div>
      </div>
      <div class="details">
          <div class="details-left">
            <div class="details-title">
                <h3>NPC13007</h3>
                <span>定存协议</span>
            </div>
            <ul class="details-left-list">
                <li>
                    <span>13.81%</span>
                    <p>存入时收益率</p>
                </li>
                <li>
                    <span>3个月</span>
                    <p>锁定期</p>
                </li>
                <li>
                    <span>10000</span>
                    <p>起存数量</p>
                </li>
                <li>
                    <span>1 : 1.5</span>
                    <p>存入时兑率</p>
                </li>
            </ul>
          </div>
          <div class="details-right">
              <ul class="details-right-list">
                  <li>
                      <span>状态：</span>
                      <i>存储中</i>
                  </li>
                  <li>
                      <span>存入时间：</span>
                      <i>2017年-12-23  22:10</i>
                  </li>
                  <li>
                      <span>解冻时间：</span>
                      <i>2017年-12-23  22:10</i>
                  </li>
                  <li>
                      <span>存入数量：</span>
                      <i>100000</i>
                  </li>
                  <li>
                      <span>应得总金额：</span>
                      <i>￥300000.00</i>
                  </li>
              </ul>
          </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    }
}
</script>
<style scoped lang="scss">
.storageDetail{
    .img-wrap{
        height: 200px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .Notice-title{
        width: 1200px;
        margin: 0 auto;
        padding:22px 0 22px 34px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        .titles{
            color: #333;
            .sss{
                color: #fe8800;
            }
        }
    }
    .details{
        width: 1200px;
        margin: 0 auto;
        padding: 50px 36px 75px 34px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .details-left{
            flex: 1;
            .details-title{
                display: flex;
                border-bottom: 2px solid #fe8800;
                align-items: center;
                h3{
                    font-size: 24px;
                    font-weight: bold;
                }
                span{
                    margin-left: 10px;
                    font-size: 14px;
                    color: #666;
                }
            }
            .details-left-list{
                padding: 84px 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                li{
                    text-align: center;
                    span{
                        font-size: 24px;
                    }
                    p{
                        padding: 8px 10px;
                        background: #eef1f1;
                        border-radius: 15px;
                        margin-top: 20px;
                    }
                }
            }
        }
        .details-right{
            background-image: url('../assets/image/suo.png');
            padding: 50px 60px;
            line-height: 32px;
            margin-left: 90px;
            .details-right-list{
                li{
                    color: #999;
                }
            }
        }
    }
}
</style>
